<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=400;" />
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {

                // Create and populate the data table.
        var data = new google.visualization.DataTable();
        var raw_data = [
                        ['ความรุนแรงความยากจน',
                        <?php
                          $i = 0;
                          foreach($result as $val){
                            if(sizeof($result) == $i+1){
                              echo $val['tam_violence_poverty'];
                            }else{
                              echo $val['tam_violence_poverty'].",";
                            }
                            $i++;
                          }
                        ?>
                        ]
                       ];
        
        //var years = ['เมืองแพร่','ร้องกวาง','ลอง','สูงเม่น','เด่นชัย','สอง','วังชิ้น','หนองม่วงไข่'];

        var years = [<?php
                      $j = 0;
                      foreach($result as $val){
                        $tam_name = $val[tam_name];
                        if(sizeof($result) == $j+1){
                      ?>
                        '<?php echo $tam_name;?>'
                       <?php
                        }else{
                       ?>
                       '<?php echo $tam_name;?>',
                       <?php
                        }
                        $j++;
                      }
                    ?>];

        //alert(raw_data);
        //alert(years);
        data.addColumn('string', 'ร้อยละ');
        for (var i = 0; i  < raw_data.length; ++i) {
          data.addColumn('number', raw_data[i][0]);    
        }
        
        data.addRows(years.length);
      
        for (var j = 0; j < years.length; ++j) {    
          data.setValue(j, 0, years[j].toString());    
        }
        for (var i = 0; i  < raw_data.length; ++i) {
          for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);    
          }
        }
        
        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('visualization')).
            draw(data,
                 {title:"กราฟแสดงความรุนแรงความยากจน(%)",
                  width:400, height:400,
                  hAxis: {title: "รายชื่อตำบลใน อ.<?php echo $result[0][dis_name];?>"}}
            );
      }
      

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization"></div>
  </body>
</html>
